<template>
<div id="ShebeiBang" class="page-blank">
  <van-nav-bar title="绑定设备" left-arrow @click-left="goBack()"/>  
  <van-cell-group>
    <van-field readonly label="门店名称" :value="$route.query.shopName" required/>
    <van-field readonly label="设备编号" v-for="(item, index) in list" :key="index" :value="item">
      <van-button @click="list.splice(index, 1)" slot="button" size="small" type="primary">删除</van-button>
    </van-field>
  </van-cell-group>
  
  <div style="width: 6.7rem; height: 1.05rem; line-height: 1.05rem; text-align: center; border-radius: 5px; 
    background: #18a3dc; color: #fff; margin: 1rem auto 0; font-size: 0.32rem;" @click="beforeAdd">添加设备</div>
  
  <div style="width: 6.7rem; height: 1.05rem; line-height: 1.05rem; text-align: center; border-radius: 5px; 
    background: #18a3dc; color: #fff; margin: 1rem auto 0; font-size: 0.32rem;" @click="submit">提交</div>

  <van-action-sheet v-model="showAction" :actions="actions" @select="selectAction" cancel-text="取消" @cancel="showAction = false"/>

</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';
declare const wx: any;

@Component
export default class ShebeiBang extends Vue {

  list: any = []
  
  showAction: any = false
  actions: any = [
    { name: '普通设备' },
    { name: '新48口（双二维码设备）' }
  ]
  selectAction(obj: any) {
    this.showAction = false;
    console.log( obj );
    if( obj.name == '新48口（双二维码设备）' ) {
      let rcode: any = '';
      let lcode: any = '';
      this.$dialog({ title: '提示', message: '请扫描设备右侧二维码！' }).then(() => {
        this.saoma((result: any) => {  
          rcode = result.split('=')[1];
          this.$dialog({ title: '提示', message: '请扫描设备左侧二维码！' }).then(() => {
            this.saoma((result: any) => {  
              lcode = result.split('=')[1];
              this.addCode( rcode + '&&' + lcode );
            });
          });
        });
      });
    } else {
      this.addEquipment();
    }
  }
  saoma(cb: any) {
    if(this.$store.state.wxSwitch != 1) return this.$toast('请在微信公众号内打开进行该操作');
    let config = this.$store.state.config;
    wx.config({ ...config, debug: false, jsApiList: [ 'scanQRCode', 'chooseImage', 'uploadImage', 'getLocation', 'openLocation' ] });
    wx.scanQRCode({
      needResult: 1, 
      scanType: [ "qrCode" ], 
      success: (res: any) => {
        let result = res.resultStr; 
        cb(result);
      }
    });
  }

  beforeAdd() {
    if(this.$store.state.wxSwitch != 1) return this.$toast('请在微信公众号内打开进行该操作');
    this.showAction = true;
  }

  addEquipment() {
    this.saoma((result: any)  => {
      if( result.indexOf( '=' ) > 0 ) {
        axios.get('/api/chargerPlaEquipmentController/getSnById', {
          id: result.split('=')[1]
        }).then((res: any) => {
          this.addCode( res );
        });
      } else this.addCode( result );
    });

  }

  addCode(code: any) {
    if(this.list.indexOf( code ) < 0) this.list.push( code );
    else this.$toast('该设备已在添加列表中！');
  }

  submit() {
    if(this.list.length == 0) return this.$toast('请通过扫码录入要绑定设备的编号！');
    let userId = this.$store.state.userInfo.userId;
    axios.post('/api/chargerPlaEquipmentController/shopBindingDevice', {
      query: { snList: this.list.join(','), shopId: this.$route.query.shopId, userId }
    }).then((res: any) => {
      this.$toast('设备绑定成功！');
      this.goBack();
    });
  }

  goBack() {
    this.$router.go(-1);
  }
  
};
</script>

